<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 10:54:10
 * @LastEditTime: 2024-02-22 13:17:21
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义头像组件，动态传值显示头像，可通过slot动态插入样式
 * @FilePath: components\avatar\avatar.vue
-->
<template>
  <uni-popup ref="timePicker" mask-background-color="rgba(0,0,0,0.6)">
    <view class="area">
      <view class="inner">
        <picker-view :value="pickerValue" indicator-class="indicator" @change="handleChange" @pickstart="pickstart"
          @pickend="pickend" :immediate-change="true">
          <picker-view-column class="picker-content">
            <view class="picker-item" v-for="(item, index) in option[0]" :key="index">{{ item }}</view>
          </picker-view-column>
          <picker-view-column class="picker-content">
            <view class="picker-item" v-for="(item, index) in option[1]" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="handler">
        <view @click="todo(v.key)" class="single"
          :style="{ background: v.bgcolor, color: v.color, borderColor: v.bdcolor }" v-for="(v, i) in button" :key="i">{{
            v.title }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "popup",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Array,
      default: [],
    },
    button: {
      type: Array,
      default: [{ title: '取消', bgcolor: '#E8FFEF', color: '#6ABE83', bdcolor: '#6ABE83', key: 'cancel' },
      { title: '确定', bgcolor: '#6ABE83', color: '#ffffff', key: 'confirm' }],
    }
  },
  data() {
    return {
      isScroll: false,
      pickerValue: [0, 0]
    };
  },
  computed: {},
  watch: {
    show(v) {
      v == true ? this.$refs.timePicker.open("bottom") : this.$refs.timePicker.close();
    }
  },
  onLoad(d) { },
  onShow() { },
  methods: {
    handleChange(e) {
      this.pickerValue = e.detail.value;
    },
    pickstart(e) {
      this.isScroll = true;
    },
    pickend(e) {
      this.isScroll = false;
    },
    change(v) {
      this.$emit("update:show", v.show);
    },
    todo(key) {
      if (this.isScroll) return;
      this.$refs.timePicker.close();
      key == "confirm" && this.$emit("confirm", { value: `${this.pickerValue[0] < 10 ? '0' + this.pickerValue[0] : this.pickerValue[0]}:${this.pickerValue[1] < 10 ? '0' + this.pickerValue[1] : this.pickerValue[1]}` });
    }
  },
};
</script>
<style lang='less' scoped>
/deep/ picker-view {
  width: 100%;
  height: 100%;

  .picker-item {
    height: 96upx !important;
    text-align: center;
    font-size: 32upx;
    color: #1D2129;
    line-height: 96upx;
  }

  .indicator {
    height: 96upx;
  }
}

.area {
  position: fixed;
  top: 60%;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  border-radius: 40upx;

  .inner {
    width: 100%;
    height: calc(100% - 100upx);
  }

  .handler {
    .flex();
    padding: 0 36upx;

    .single {
      .flex(row, center);
      width: 330upx;
      height: 100upx;
      border-radius: 50upx;
      border-width: 2upx;
      border-style: solid;
      font-size: 36upx;
      line-height: 36upx;
      letter-spacing: 18upx;
      text-indent: 18upx;
    }
  }
}
</style>